<template>
	<view>
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar :title="title" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		<fui-search-bar @search="search" v-model="mobile" @cancel="cancelSearch" placeholder="输入手机号/邀请码查询团队用户信息"></fui-search-bar>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="">
				<view class="direct">
					<view class="" v-for="(item,index) in directList">
						<view class="direct_item" @click="upDetail(index)">
							<div class='ribbon'>
								<span>{{item?.valid_state?'有效':'无效'}}</span>
							</div>
							<view class="direct_num">
								<fui-icon color="#fff" size="40" name="my"></fui-icon>
								{{item.subordinate}}
							</view>
							<view class="direct_left">
								<fui-avatar :src="item.avatar"></fui-avatar>
							</view>
							<view class="direct_center">
								<view class="user_name">
									{{item.nickname}}
								</view>
								<view class="phone">
									电话:{{setMobile(item.mobile)}}
								</view>
							</view>
							<view class="direct_center">
								<view class="user_">
									{{getVipType(item.grade_id)}}
								</view>
								<view class="phone">
									注册日期:{{formatDateDay(item.register_date)}}
								</view>
							</view>
							<view class="direct_right">
								<fui-icon class="biao" :style="{'transform':upbiao==index&&show?Angle:''}" name="roundright" size="50" color="#fff"></fui-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<fui-loading v-if="dataLoading" :isFixed="true" srcCol="/static/images/component/loading_white.png" text="正在加载..."></fui-loading>
	</view>
</template>

<script setup>
	import {
		formatDateDay
	} from '@/utils/index.js'
	import {
		LoginStore
	} from "@/store/modules/login.js";
	const apiVip = uniCloud.importObject('qc-vip', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const get = uniCloud.importObject('qc-user', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	const dataLoading = ref(false) //控制loading字段
	const userInfo = computed(() => (LoginStore().userInfo))
	const setMobile = (e) => {
		let mobile = e.toString().slice(0, 3).padEnd(7, '*') + e.toString().slice(-4);
		return mobile
	}
	let level = null
	const vipList = ref([])

	const title = ref()
	onLoad(async (e) => {
		level = e.level
		const res = await apiVip.getVip({
			options: true
		})
		vipList.value = res.data
		//vip数据处理
		let arr = []
		res.data.forEach((item, index) => {
			if (item.value == userInfo?.value?.vipPower?.open_type) {
				item['disabled'] = false
			} else {
				item['disabled'] = true
			}
			arr.push(item)
		})

		options.value = arr.map((item) => {
			return {
				text: item['label'],
				value: item['value'],
				disabled: item.disabled
			}
		})


		switch (e.level) {
			case "1":
				title.value = "直推人数"
				break;
			case "2":
				title.value = "团队人员"
				break;
				// #ifdef APP-PLUS
				uni.setNavigationBarTitle({
					title: title.value
				});
				// #endif
		}
	})

	const getVipType = ((id) => {
		let label = ''
		vipList.value.forEach((item) => {
			if (id == item.value) {
				label = item.label
			}
		})
		return label
	})
	const options = ref([])

	//打开弹窗
	const assetsTap = () => {
		ddlAssets.value = true
		vipType.value = null
		vipValue.value = null
	}
	const vipType = ref()
	const vipValue = ref()
	
	const showMoney = ref(false)

	const optionsMoney = [{
			text: '充值余额',
			value: "topup_balance"
		},
		{
			text: '收入余额',
			value: "income_balance"
		}
	]
	const supportMoney = ref()

	//邀请人列表
	const directList = ref([])
	//手机号
	const mobile = ref()
	// 分页
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upCallback = async (mescroll) => {
		try {
			let params = {
				mobile: mobile.value, //手机号
				pageNum: mescroll.num,
				pageSize: mescroll.size,
				level,
				user_id: userInfo?.value?._id
			}
			const res = await get.getInvitedUser(params)
			const curPageData = res.data || [] // 当前页数据
			if (mescroll.num == 1) directList.value = []; // 第一页需手动制空列表
			directList.value = directList.value.concat(curPageData); //追加新数据
			console.log(directList.value);
			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总页数)
		} catch (e) {
			mescroll.endErr(); // 请求失败, 结束加载
		}
	}
	let upbiao = ref(null)
	let Angle = ref('rotate(-90deg)')
	let show = ref(false)

	function upDetail(index) {
		show.value = !show.value
		upbiao.value = index
	}

	function search(e) {
		mobile.value = e.detail.value
		getMescroll().resetUpScroll()
	}
	//取消搜索	
	function cancelSearch() {
		mobile.value = ''
		getMescroll().resetUpScroll()
	}
	// #ifdef H5
	function leftClick() {
		uni.navigateBack()
	}
	// #endif
</script>

<style lang="scss" scoped>
	.fui-select {
		display: flex;
		justify-content: space-between;
	}

	.vip_list {
		width: 32%;
		height: 100rpx;
	}

	.moveCartoon-enter-active {
		animation: move .5s;
	}

	.moveCartoon-leave-active {
		animation: move .5s reverse;
	}

	@keyframes move {
		from {
			transform: translateX(-100%);
		}

		to {
			transform: translate(0);
		}
	}


	.item1 {
		text-align: center;
		width: 35%;
		padding: 32rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.item {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 32rpx 0 32rpx 0;
		width: 30%;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.teamNum {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
	}

	.zhitui {
		color: #000;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.upbiao {
		transform: rotate(-90deg);
	}

	.biao {
		transform: rotate(90deg);
	}

	.direct_right {
		display: flex;
		align-items: center;
	}

	.user_name {
		font-size: 28rpx;
	}

	.phone {
		font-size: 24rpx;
	}

	.direct {
		color: #fff;
		font-size: 26rpx;
		padding: 0rpx 32rpx 32rpx 32rpx;
	}

	.direct_num {
		padding: 3rpx 15rpx;
		background-color: #ffb703;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0;
	}

	.direct_item {
		position: relative;
		border-radius: 20rpx;
		margin-bottom: 32rpx;
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		background-color: #2e81ff;
		position: relative;
		overflow: hidden;
	}

	.direct_center {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
	}


	.circle {
		width: 100px;
		height: 50px;
		background-color: #cb18f8;
		border-radius: 0 0 50% 0;
	}

	.ribbon {
		background-color: #FFB703;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		left: -53px;
		top: -2px;
		transform: rotate(-45deg);
		box-shadow: 0 0 10px #888;
	}

	.ribbon span {
		border: 1px solid #1890FF;
		color: #fff;
		display: block;
		font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
		margin: 1px 0;
		padding: 5px 50px;
		text-align: center;
		text-shadow: 0 0 5px #444;
	}
</style>